<template>
    <div class="exam-settings-container">
      <h2 class="settings-title">考试防作弊设置</h2>
      
      <div class="settings-form">
        <!-- 1. 键盘复制键设置 -->
        <div class="setting-item">
          <div class="setting-question">
            1. 是否允许"键盘复制键"：
          </div>
          <el-radio-group v-model="copyKeySetting" class="setting-options">
            <el-radio :label="false" class="recommended">禁止（推荐）</el-radio>
            <el-radio :label="true">允许</el-radio>
          </el-radio-group>
          <div class="setting-description">
            *设置是否允许考生在答卷过程中使用复制键，即：Ctrl+C
          </div>
        </div>
        
        <!-- 2. 鼠标右键设置 -->
        <div class="setting-item">
          <div class="setting-question">
            2. 是否允许"鼠标右键"：
          </div>
          <el-radio-group v-model="mouseRightClickSetting" class="setting-options">
            <el-radio :label="false" class="recommended">禁止（推荐）</el-radio>
            <el-radio :label="true">允许</el-radio>
          </el-radio-group>
          <div class="setting-description">
            *设置是否允许考生在答卷过程中使用鼠标右键进行操作，如：复制、查看源码等
          </div>
        </div>
        
        <!-- 3. 鼠标拖拽选择设置 -->
        <div class="setting-item">
          <div class="setting-question">
            3. 是否允许"鼠标拖拽选择"
          </div>
          <el-radio-group v-model="mouseDragSetting" class="setting-options">
            <el-radio :label="true" class="recommended">开启（推荐）</el-radio>
            <el-radio :label="false">关闭</el-radio>
          </el-radio-group>
        </div>
        
        <!-- 4. 防切屏功能 -->
        <div class="setting-item">
          <div class="setting-question">
            4. 是否开启"防切屏"功能
          </div>
          <el-radio-group v-model="antiScreenSwitchSetting" class="setting-options">
            <el-radio :label="true" class="recommended">开启（推荐）</el-radio>
            <el-radio :label="false">关闭</el-radio>
          </el-radio-group>
          <div class="setting-description">
            *设置考生在考试过程中，是否限制其切换浏览器页面或其他程序<br>
            *开启防切屏后，系统会限制考生在考试时切屏，并给予提示<br>
            *考生切屏次数超过允许的最大值时，系统会尝试自动提交考生试卷
          </div>
        </div>
        
        <!-- 5. 摄像头监考功能 -->
        <div class="setting-item">
          <div class="setting-question">
            5. 是否开启"摄像头监考"功能
          </div>
          <el-radio-group v-model="cameraMonitoringSetting" class="setting-options">
            <el-radio :label="true" class="recommended">开启（推荐）</el-radio>
            <el-radio :label="false">关闭</el-radio>
          </el-radio-group>
          <div class="setting-description">
            *设置是否允许考生在答卷过程中监考人员通过摄像头进行拍照，以及拍摄的次数
          </div>
        </div>
        
        <!-- 保存按钮 -->
        <div class="form-actions">
          <el-button type="primary" @click="saveSettings">保存修改</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        copyKeySetting: false,            // 键盘复制键设置
        mouseRightClickSetting: false,    // 鼠标右键设置
        mouseDragSetting: true,          // 鼠标拖拽选择设置
        antiScreenSwitchSetting: true,   // 防切屏功能
        cameraMonitoringSetting: true    // 摄像头监考功能
      };
    },
    methods: {
      saveSettings() {
        // 这里可以添加保存设置的逻辑
        this.$message({
          message: '设置已保存成功',
          type: 'success'
        });
        
        // 实际应用中，这里可以调用API保存设置
        // console.log({
        //   copyKeySetting: this.copyKeySetting,
        //   mouseRightClickSetting: this.mouseRightClickSetting,
        //   mouseDragSetting: this.mouseDragSetting,
        //   antiScreenSwitchSetting: this.antiScreenSwitchSetting,
        //   cameraMonitoringSetting: this.cameraMonitoringSetting
        // });
      }
    }
  };
  </script>
  
  <style scoped>
  .exam-settings-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .settings-title {
    color: #333;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    font-size: 20px;
    font-weight: bold;
  }
  
  .setting-item {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
  }
  
  .setting-question {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 500;
  }
  
  .setting-options {
    margin-bottom: 10px;
  }
  
  .setting-options >>> .el-radio {
    margin-right: 20px;
  }
  
  .setting-options >>> .el-radio__label {
    font-size: 14px;
  }
  
  .recommended >>> .el-radio__label {
    color: #67C23A;
    font-weight: bold;
  }
  
  .setting-description {
    font-size: 13px;
    color: #909399;
    line-height: 1.6;
    margin-top: 10px;
    padding-left: 10px;
  }
  
  .form-actions {
    margin-top: 30px;
    text-align: center;
  }
  
  @media (max-width: 768px) {
    .exam-settings-container {
      padding: 15px;
    }
    
    .setting-question {
      font-size: 15px;
    }
    
    .setting-options >>> .el-radio {
      display: block;
      margin-bottom: 8px;
    }
  }
  </style>